import React, { useRef, useMemo } from 'react';
import type { ProColumnsType, SearchRef, SearchConfig, formRef } from './type';
import { Button, Popover, Dropdown } from 'antd';
import SearchBar from './SearchBar';
import Icon from '/@/components/icon';
import styleCss from './index.module.scss';

interface TableHeaderProps<T> {
  headerTitle?: React.ReactNode;
  search: SearchConfig | false;
  toolBarRender?: React.ReactNode;
  MoreFormItem?: ProColumnsType<T>;
  refeshFuntion?: () => void;
  // eslint-disable-next-line no-unused-vars
  sizeFuntion?: (val: 'middle' | 'large' | 'small') => void;
  // eslint-disable-next-line no-unused-vars
  onMoreSearch?: (val: Partial<T>, isReset: boolean) => void;
}

export default function TableHeader<T extends object>({
  headerTitle,
  toolBarRender,
  MoreFormItem,
  refeshFuntion,
  sizeFuntion,
  search,
  onMoreSearch,
}: TableHeaderProps<T>) {
  const ref = useRef<SearchRef>(null);
  const RenderBtn = useMemo(() => {
    return search && search.moreOperateRender && search.moreOperateRender(ref.current?.form as formRef);
  }, []);
  return (
    <div className={styleCss.header_style}>
      <div className={styleCss['table_header']}>{headerTitle}</div>
      <div className={styleCss['table_tool_bar']}>
        {toolBarRender && toolBarRender}
        {search && (
          <Popover
            placement='bottom'
            title={() => {
              return (
                <div style={{ width: '300px', display: 'flex' }}>
                  <h2 style={{ fontWeight: 'bold', flex: '1' }}>更多过滤</h2>
                  {search.moreOperateRender ? (
                    /* 自定义操作栏 */
                    <div>{RenderBtn && RenderBtn.map((el: any, index) => <div key={index}>{el}</div>)}</div>
                  ) : (
                    /* 默认操作栏 提交，重置 */
                    <div style={{ display: 'flex', gap: '10px' }}>
                      <Button
                        size='small'
                        onClick={() => {
                          ref.current?.handleFormReset();
                        }}
                      >
                        {search.resetText}
                      </Button>
                    </div>
                  )}
                </div>
              );
            }}
            content={
              <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
                {MoreFormItem && (
                  <SearchBar
                    ref={ref}
                    formItems={MoreFormItem}
                    layout='horizontal'
                    onSearch={(values, isReset) => {
                      onMoreSearch && onMoreSearch(values, isReset);
                    }}
                    onChangeSearch={(values) => {
                      onMoreSearch && onMoreSearch(values, false);
                    }}
                  />
                )}
              </div>
            }
          >
            <Button icon={<Icon icon='FilterOutlined' />}>更多筛选</Button>
          </Popover>
        )}

        <Icon tooltip='刷新' icon='icon-shuaxin' className={styleCss['icon']} onClick={refeshFuntion}></Icon>
        <Dropdown
          menu={{
            items: [
              {
                label: '默认',
                key: 'middle',
              },
              {
                label: '中等',
                key: 'large',
              },
              {
                label: '紧凑',
                key: 'small',
              },
            ],
            selectable: true,
            defaultSelectedKeys: ['middle'],
            onClick: ({ key }) => {
              sizeFuntion && sizeFuntion(key as any);
            },
          }}
          trigger={['click']}
        >
          <Icon tooltip='组件大小' icon='ColumnHeightOutlined' className={styleCss['icon']}></Icon>
        </Dropdown>
        <Icon tooltip='打印' icon='icon-24gf-printer' className={styleCss['icon']}></Icon>
        <Icon tooltip='下载' icon='icon-yunxiazai' className={styleCss['icon']}></Icon>
      </div>
    </div>
  );
}
